<script>
export default {
  name: 'AttributeBox',
  data() {
    return {
      currentRow: null,
      visible: false,
      sources: null
    }
  },
  methods: {
    setCurrent(row) {
      this.currentRow = null
      this.currentRow = {}
      for (const key in row) {
        this.currentRow[key] = row[key]
      }
      this.$forceUpdate()
    },
    save() {
      this.$emit('saveCurrent', this.currentRow)
      this.currentRow = null
    },
    handleChangeSources() {
      this.visible = true
      this.sources = null
      this.sources = []
      this.currentRow['sources'].forEach(item => {
        this.sources.push({
          label: item['label'],
          value: item['value']
        })
      })
    },
    handleAddItem() {
      this.$prompt('请输入数据值', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        showClose: false
      }).then(({ value }) => {
        this.sources.push({
          label: value,
          value
        })
      }).catch(() => {})
    },
    handleRemoveItem(e) {
      this.sources.splice(e, 1)
    },
    handleSave() {
      this.currentRow['sources'] = null
      this.currentRow['sources'] = []
      this.currentRow['sources'] = this.sources
      this.$forceUpdate()
      this.visible = false
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<template>
  <div class="attribute-box-container">
    <table v-if="currentRow != null" class="attribute-table" cellpadding="0" cellspacing="0" border="0">
      <tr>
        <th>
          <div class="header-cell">属性名称</div>
        </th>
        <th>
          <div class="header-cell">属性值</div>
        </th>
      </tr>
      <tr>
        <td>
          <div class="cell">模块名称</div>
        </td>
        <td>
          <div class="cell">
            <input class="input" v-model="currentRow['name']" placeholder="请输入英文" />
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell">标签名称</div>
        </td>
        <td>
          <div class="cell">
            <input class="input" v-model="currentRow['label']" />
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell">占位符</div>
        </td>
        <td>
          <div class="cell">
            <input class="input" v-model="currentRow['placeholder']" />
          </div>
        </td>
      </tr>
      <tr v-if="currentRow['type'] === 'radio' || currentRow['type'] === 'select'">
        <td>
          <div class="cell">数据源</div>
        </td>
        <td>
          <div class="cell">
            <div class="source-box">
              <div class="source-view">{{ JSON.stringify(currentRow['sources']) }}</div>
              <div class="source-btn" @click="handleChangeSources">…</div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="cell"></div>
        </td>
        <td>
          <div class="cell"></div>
        </td>
      </tr>
    </table>
    <el-dialog :visible.sync="visible" :show-close="false" :close-on-click-modal="false" width="500px" title="绑定数据源">
      <template #footer>
        <el-button type="primary" size="small" @click="handleSave">保存</el-button>
        <el-button size="small" @click="handleCancel">取消</el-button>
      </template>
      <el-button size="small" type="primary" @click="handleAddItem">新增</el-button>
      <el-table :data="sources" style="width: 100%;">
        <el-table-column label="值" prop="label" />
        <el-table-column label="操作" width="85">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="handleRemoveItem(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style lang="scss">
.attribute-box-container {
  width: 100%;

  .attribute-table {
    width: 100%;

    .header-cell {
      width: 100%;
      height: 32px;
      border: 1px solid #d4d4d4;
      line-height: 32px;
      user-select: none;
    }

    .cell {
      width: 100%;
      height: 32px;
      border: 1px solid #d4d4d4;
      line-height: 32px;

      .input {
        height: 32px;
        width: 100%;
        padding-left: 8px;
      }

      .source-box {
        height: 30px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        .source-view {
          width: calc(100% - 32px);
          max-width: 150px;
          height: 100%;
          border: 1px solid #989898;
          line-height: 30px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .source-btn {
          width: 32px;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #f4f4f4;
          border: 1px solid #d4d4d4;
          border-radius: 2px;
          user-select: none;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
